<template>
  <div class="ca_config">
    <div style="background: pink;width: 16px;height: 16px;position: absolute;top: 0;right:50px;" id="backDoor" @click="goBackDoor"></div>
    <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="页面基础配置" name="first">
        <div class="ca_config_ul">
          <ul>
            <li>
              <label>配置说明</label>
              <span class="con">配置设置</span>
              <span class="trips">配置描述</span>
            </li>
            <li>
              <label>申请单来源</label>
              <span class="con">
                <el-input
                  v-model="clinicalFormData.appointmentTypeConfig"
                  size="medium"
                  placeholder="临床预约">
                </el-input>
              </span>
              <span class="trips">可以通过链接传参改变，用申请单号源查询</span>
            </li>
            <li>
              <label>确认弹窗</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.submitPopUp"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">预约提交后是否显示确认弹窗</span>
            </li>
            <li>
              <label>推荐号源</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isSwitch"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">默认只显示推荐号源</span>
            </li>
            <li>
              <label>检查医生</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isCheckDoctor"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示检查医生选择</span>
            </li>
            <li>
              <label>预约医生</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isAppointDoctor"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示预约医生选择</span>
            </li>
            <li>
              <label>扫描方式</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isCheckTypeMode"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示扫描方式（扫描方式为空不显示）</span>
            </li>
            <li>
              <label>病人类型</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isPatType"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示病人类型</span>
            </li>
            <li>
              <label>弹窗宽度</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isDialogWidth"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否启用当前宽度自定义</span>
            </li>
            <li>
              <label>院区拼接</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isDepArea"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否启用院区拼接</span>
            </li>
            <li>
              <label>检查分组</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isCheckGroup"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否启用检查分组</span>
            </li>
            <li>
              <label>二维码链接</label>
              <span class="con">
                <el-input
                  v-model="clinicalFormData.qrCodeUrl"
                  size="medium"
                  placeholder="请输入网址链接">
                </el-input>
              </span>
              <span class="trips">打印申请单二维码链接</span>
            </li>
            <!--
            <li>
              <label>启用默认号源</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isChangeHospital"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">只显示默认号源，其他号源不看选</span>
            </li>
            -->
            <li>
              <label>结果排序</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.CAResultsDateTimeRank"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">左下角预约结果根据预约时间排序</span>
            </li>
            <li>
              <label>机房下拉</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.moreCheckRoomSwitch"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否启用机房下拉</span>
            </li>
          </ul>
          <ul>
            <li>
              <label>配置说明</label>
              <span class="con">配置设置</span>
              <span class="trips">配置描述</span>
            </li>
            <li>
              <label>跨院设置</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.regionalHospitalConfig"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">当前医院是否存在跨院(true为跨院)</span>
            </li>
            <li>
              <label>检查须知</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.inspectionInstructions"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">预约提交后是否显示检查须知内容</span>
            </li>
            <li>
              <label>号源显示类型</label>
              <span class="con">
                <el-select v-model="clinicalFormData.isSwitchType" :disabled="!clinicalFormData.isSwitch" size="small" placeholder="请选择号源推荐类型">
                  <el-option label="机房" value="0"></el-option>
                  <el-option label="时段" value="1"></el-option>
                </el-select>
              </span>
              <span class="trips">根据机房推荐号源、根据时段显示号源</span>
            </li>
            <li>
              <label>部门类型</label>
              <span class="con">
                <el-select v-model="clinicalFormData.patType" multiple clearable :disabled="!clinicalFormData.isCheckDoctor" size="small" placeholder="请选择">
                  <el-option
                    v-for="(pt, index) in patTypeOptions"
                    :key="index"
                    :value="pt"
                    :label="pt"
                  ></el-option>
                </el-select>
              </span>
              <span class="trips">哪些部门显示检查医生</span>
            </li>
            <li>
              <label>转运工具</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isTransportTools"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示转运工具</span>
            </li>
            <li>
              <label>运送方式</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isTransportType"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否显示运送方式</span>
            </li>
            <li>
              <label>弹窗宽度</label>
              <span class="con">
                <el-input
                  v-model="clinicalFormData.dialogWidth"
                  type="number"
                  size="medium"
                  :disabled="!clinicalFormData.isDialogWidth"
                  placeholder="如：90">
                </el-input>
              </span>
              <span class="trips">配置当前弹窗宽度（单位：%）</span>
            </li>
            <li>
              <label>启用一周号源</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isFastQueryNumber"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是代表启用一周号源的功能</span>
            </li>
            <li>
              <label>折叠选择号源</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isShrink"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">折叠选择号源的区域</span>
            </li>
            <li>
              <label>是否隐藏金额</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isHideMoney"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">默认否，为不隐藏</span>
            </li>
            <li>
              <label>是否打印</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isPrint"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否需要打印</span>
            </li>
            <li>
              <label>排队号</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isBookToMinutes"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是代表启用排队号功能</span>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已预约列表配置" name="second">
        <div class="ca_config_ul2">
          <ul style="width: 60%">
            <li>
              <label>配置说明</label>
              <span class="con">配置设置</span>
              <span class="trips1">配置描述</span>
            </li>
            <li>
              <label>申请单来源</label>
              <span class="con">
                <el-input
                  v-model="clinicalFormData.appointmentTypeConfig2"
                  size="medium"
                  placeholder="临床预约">
                </el-input>
              </span>
              <span class="trips1">可以通过链接传参改变，用查询已预约列表</span>
            </li>
            <li>
              <label>改约按钮</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.rebookConfig"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips1">默认允许改约，关闭后屏蔽改约按钮</span>
            </li>
            <li>
              <label>登记人限制</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.registerDoctorConfig"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips1">是否只显示当前登记人数据(true必传/false去掉)</span>
            </li>
          </ul>
          <ul>
            <li>
              <label>配置说明</label>
              <span class="con" style="width: 128px">配置设置</span>
              <span class="trips">配置描述</span>
            </li>
            <li>
              <label>根据患者查询</label>
              <span class="con" style="width: 128px">
                <el-switch
                  v-model="clinicalFormData.sourceConfig"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">设置true根据患者id查询</span>
            </li>
            <li>
              <label>取消按钮</label>
              <span class="con" style="width: 128px">
                <el-switch
                  v-model="clinicalFormData.cancelBtnConfig"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">默认允许取消，关闭后屏蔽取消按钮</span>
            </li>
            <li></li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="打印配置" name="third">
        <div class="ca_config_ul2">
          <ul>
            <li>
              <label>配置说明</label>
              <span class="con">配置设置</span>
              <span class="trips">配置描述</span>
            </li>
            <li>
              <label>LodopFuncs</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.lodopFuncs"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">启动LodopFuncs插件打印</span>
            </li>
            <li>
              <label>指定打印机</label>
              <span class="con">
                <el-input
                  v-model="clinicalFormData.setPrinter"
                  size="medium"
                  :disabled="!clinicalFormData.lodopFuncs"
                  placeholder="设置指定打印机">
                </el-input>
              </span>
              <span class="trips">设置指定打印机</span>
            </li>
            <li>
              <label>多次打印</label>
              <span class="con">
                <el-switch
                  v-model="clinicalFormData.isPagePrint"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否">
                </el-switch>
              </span>
              <span class="trips">是否触发多次打印</span>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import clinicalConfig from '@/mixin/clinicalConfig'
import { Options } from '@/utils/constant'
export default {
  mixins: [clinicalConfig],
  data() {
    return {
      clinicalFormData: this.$store.state.settings.clinicalContent,
      activeName: 'first',
      patTypeOptions: ['CT', 'US', 'MR'],
      patientSourceOptions: Options.patientTypeItemOptions
    }
  },
  created() {
    this.clinicalFormData = { ...this.baseFormData, ...this.clinicalFormData }
    delete this.clinicalFormData.unPrintAutoPatientSource
  },
  methods: {
    goBackDoor() {
    }
  }
}
</script>

<style lang="scss" scoped>
.ca_config{
  position: relative;
  h3{
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    border-left: solid 2px #2acbfc;
    color: #606266;
    font-size: 16px;
    font-weight: bold;
    word-break: break-all;
    margin-bottom: 15px;
    &:nth-child(2){
      margin-top: 15px;
    }
  }
.ca_config_ul, .ca_config_ul2{
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  ul{
    width: 50%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #EBEEF5;
    &:nth-child(1){
      border-left: 1px solid #EBEEF5;
    }
    li{
      display: flex;
      align-items: center;
      width: 100%;
      border-top: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;
      margin: 0;
      height: 42px;
      line-height: 42px;
      box-sizing: border-box;
      padding: 0 10px;
      color: #606266;
      &:nth-child(2n+1){
        background: #FAFAFA;
      }
      label{
        width: 120px;
        font-weight: normal;
      }
      .con{
         width: 240px;
         border-left: 1px solid #EBEEF5;
         border-right: 1px solid #EBEEF5;
         box-sizing: border-box;
         padding: 0 10px;
         /deep/ .el-input--medium .el-input__inner{
          height: 32px;
          line-height: 32px;
         }
      }
      .trips, .trips1{
         width: 200px;
         box-sizing: border-box;
         padding: 0 5px 0 10px;
         line-height: 18px;
         color: #999;
         font-size: 13px;
      }
      &:nth-child(1){
        background: #00C0EF;
        color: #Fff;
        font-weight: 500;
        label{
          font-weight: 500;
        }
        .trips,.trips1{
          color: #fff;
        }
      }
    }
  }
}
.ca_config_ul2{
  ul{
    width: 100%;
    li{
      .con{
      }
      .trips1 {
        width: 296px;
      }
      .trips{
        width: 450px;
      }
    }
  }
}
}
@media screen and (max-width:1200px) {
  .ca_config{
    .ca_config_ul{
      display: block;
      ul{
        width: 100%;
        border-bottom: none;
        &:nth-child(2){
          border: 1px solid #EBEEF5;
          border-top: none;
          li:nth-child(1){
            display: none;
          }
        }
      }
    }
  }
}
</style>
